<template>
  <div class="content">
    <!-- 面包屑导航 -->
  <div class="nav">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <span class="nav_span">当前位置:</span>
      <el-breadcrumb-item  :to="{ path: '/course'}">小凡学院</el-breadcrumb-item>
      <el-breadcrumb-item  :to="{ path: '/course' , query:{id: this.$route.query.subId , index: this.$route.query.navIndex}}">{{subName}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{chapterName}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 视频 -->
  <div class="video">
    <video ref="video" :src="detailNews.path" @play="play" @pause="repotNews" controls="controls" controlsList="nodownload" @contextmenu.prevent="nodownload"></video>
    <p class="video_title">{{detailNews.subname}}</p>
    <p class="miaoshu">{{detailNews.resourcename}}</p>
  </div>
  <!-- 课程概述 -->
  <div class="summary">
    <div class="summary_top">
      <div class="left_border"></div>
      <p class="text">课件概述</p>
    </div>
    <p class="summary_bottom" v-html="detailNews.reintroduction"></p>
  </div>
  <!-- 课程推荐 -->
  <div class="recommend">
    <div class="recommend_top">
      <div class="left_border"></div>
      <p class="text">课程推荐</p>
    </div>
    <div class="recommend_bottom">
      <ul>
        <li v-for="(item , index) in detailNews.courseChapterVOS" :key="index">
          <div class="thumbnail" :style="{ backgroundImage: 'url(' + item.thumbnail + ')' }" @click="goDetail(item)">
            <div class="play">
              <i class="iconfont icon-bofangliang_kapian" />
              <span> {{item.views}}</span>
            </div>
            <h4>{{item.resourceName}}</h4>
            <p class="recommend_kemu">{{chapterName}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
          subName:this.$route.query.subName,
          chapterName: this.$route.query.chapterName,
          detailNews:{},//课程详情信息
          resourceId:this.$route.query.resourceId,
          duration:0,//观看时长
          viewStart:'',//观看开始时间
          currentTime: 0,
        }
    },
    created(){
      this.getCourseDetail()
      // console.log(this.$route.query);
    },
    mounted(){
      setTimeout(() => {
        // console.log(this.detailNews.viewduration);
        this.$refs.video.currentTime = this.detailNews.viewduration
      }, 1000)
      // console.log(this.refresh.clickDis);
            window.addEventListener('beforeunload', e => {
              if(this.refresh.clickDis){
                this.beforeunloadHandler(e);
              }
            });
    },  
    beforeDestroy(){
      if(this.viewStart != ''){
        this.repotNews()
      }
      // console.log('我离开了');
    },
    methods:{
      beforeunloadHandler(e) {
			//刷新提交更新
			e = e || window.event;
				if (e) {
					e.returnValue = '正在更新数据'
				if(this.viewStart != ''){
        this.repotNews()
      }
				return;
			}
		},
      nodownload(){
        return false
      },
      //课程详情
      getCourseDetail(){
       this.axios.get(`/web/student/class/getCourseDetailVO`,{
         params:{
           resourceId:this.resourceId
         }
       }).then(res => {
         this.detailNews = res
       })
    },
    goDetail(val){
            if(this.viewStart != ''){
                this.repotNews()
            }
            this.resourceId= val.resourceId,
            this.getCourseDetail()
      },
    play(){
      this.viewStart = this.timestampToTime(new Date().getTime())
      const timer = setInterval(() => {
        this.currentTime = this.$refs.video.currentTime
      }, 500);
      this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})
    },
    //时间戳转换
		timestampToTime (timestamp) {
    const dateObj = new Date(+timestamp) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
    const year = dateObj.getFullYear() // 获取年，
    const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
    const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
    const hours = this.pad(dateObj.getHours())  // 获取时, pad函数用来补0
    const minutes =  this.pad(dateObj.getMinutes()) // 获取分
    const seconds =  this.pad(dateObj.getSeconds()) // 获取秒
    return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
   },
    pad(str) {
    return +str >= 10 ? str : '0' + str
   },
    repotNews(){
      // this.currentTime = this.$refs.video.currentTime
      let startTime = localStorage.getItem('staTime')
      let onlineTime = this.timestampToTime(startTime)
      let nowTime = new Date().getTime()
      let duration = parseInt((nowTime - startTime)/1000)
      let process = parseInt((this.currentTime/this.detailNews.videoduration)*100)
      let pageData = {
        duration,
        onlineStart: onlineTime,
        userStudies : [{
          process,
          resourceId: this.resourceId,
          viewStart: this.viewStart
        }] ,
        userType: 4
      }
      this.axios.post('/web/student/home/reportUserOnline',pageData)
      .then(() => {
        // console.log('上报成功');
      })
    },
    }
}
</script>

<style scoped src="../../style/course/courseDetail.css">

</style>